<template>
  <div class="account-add">
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <div slot="header">
        <span>{{ $route.meta.title }}</span>
      </div>
      <el-form
        :model="addForm"
        ref="addFormRef"
        :rules="addFormRules"
        label-width="70px"
        size="small"
      >
        <el-form-item
          label="账号"
          prop="account"
        >
          <el-input v-model.trim="addForm.account"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            v-model="addForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户组"
          prop="userGroup"
        >
          <el-select v-model="addForm.userGroup">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleAddAccount"
            >添加</el-button
          >
          <el-button
            type="default"
            @click="resetForm"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { checkAccountRepeat, addAccount } from '@/api/user.js'
export default {
  data() {
    const checkAccount = async (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else if (!/^[\u4E00-\u9FA5a-zA-Z0-9]{3,16}$/.test(value)) {
        callback(new Error('3到16位（字母，数字，中文）'))
      } else {
        // 检验账号是否存在
        const res = await checkAccountRepeat({ account: value })
        if (res.code === 201) {
          callback(new Error(res.msg))
        } else {
          callback()
        }
      }
    }
    return {
      addForm: {
        account: '',
        password: '',
        userGroup: ''
      },
      addFormRules: {
        account: [{ required: true, validator: checkAccount, trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ],
        userGroup: [
          { required: true, message: '请选择群组', trigger: 'change' }
        ]
      },
      options: [
        {
          value: 'super',
          label: '超级管理员'
        },
        {
          value: 'normal',
          label: '普通用户'
        }
      ]
    }
  },
  methods: {
    handleAddAccount() {
      console.log(this.addForm)
      this.$refs.addFormRef.validate(async (valid) => {
        if (valid) {
          await addAccount(this.addForm)
          this.$message({
            type: 'success',
            message: '账号添加成功',
            duration: 1000,
            onClose: () => {
              this.$router.push('/account/accountlist')
            }
          })
        }
      })
    },
    resetForm() {
      this.$refs.addFormRef.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  width: 250px;
}
</style>
